<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        const app = Vue.createApp({
           data() {
               return {
                   title: 'I am title',
                   posts: [
                       { id: 1,title: 'My journey with Vue'  },
                       { id: 2,title: 'Blogging with vue'},
                       { id: 3,title: 'Why Vue is so fun'}
                   ]
               }
           },
               template:`
               <blog-post v-for="post in posts" :title="post.title"/>
               <blog-post :title="title"/>
               `
            
            })
            app.component('blog-post',{
                props: ['title'],
                template:`
                <h4>{{title}}</h4>
                `
            })
            const vm = app.mount("#app");
    </script>
</html>